<style lang=sass>
@import "../../assets/components/_dialog.scss";
</style>
<template>
<div class="dialog-wrap" :class="activeCls" v-if="visible">
    <div class="overlay"></div>
    <div class="dialog">
        <div class="dialog-bd">
            <h3 class="bd-tt" v-if="title" v-text="title"></h3>
            <p class="bd-txt" v-text="content"></p>
        </div>
        <footer class="dialog-ft ft--full">
            <span v-for="item in items" class="ft-btn" @click="selectItem" v-text="item.text"></span>
        </footer>
    </div>
</div>
</template>

<script>

export default {
  props:{//继承父级组件参数
      title:String,
      content:String,
      className:String,
      transition:{
        type:String,
        default:"vue-actions-bottom"
      },
      items:{
        type:Array,
        default:[]
      },
      visible:{
        type:Boolean,
        default:false,
        twoWay:true
      }
  },
  data(){
    return{
      activeCls:null
    }
  },
  watch:{
     visible(val){
        val?this.activeCls="active":this.activeCls=null;
     }
  },
  methods:{
      selectItem(item){
         this.cancel();
         this.$emit("change",item);
      },
      cancel(){
         this.visible=false;
         this.$emit("cancel");
      }
  }
  
}
</script>